<template>
    <view class="page">
        <back :title="'查看证件'" :isBack="true" :isBg="false"></back>
        <view style="height: 8rpx;"></view>
        <view class="content_box" v-html="car_htm">
        </view>
        <!-- <rich-text :nodes="car_htm"></rich-text> -->
        <!-- <view class="daohang_box">
            {{ categoryCon }}
            <u-icon name="arrow-rightward" color="rgba(128, 128, 128, 1)" size="28" style="margin:0 15rpx;"></u-icon>
            {{ producttext }}
        </view>
        <view class="content_box">
            <view class="carName_box">
                <view class="dange_carnbame_box" :class="carId == item.id ? 'dange_carnbame_sel_box' : ''"
                    v-for="(item, index) in carList" :key="index" @click="carBtn(item)">
                    {{ item.name }}
                    <u-icon v-if="carId == item.id" name="checkmark" color="rgba(255, 255, 255, 1)" size="28"
                        style="margin:0 4rpx;"></u-icon>
                </view>
                <view style="width: 30%;" v-for="(i, n) in 2" :key="n"></view>
            </view>
            <view class="car_pic_box">
                <image :src="carObj.img_url" mode="widthFix" />
            </view>
            <view class="specification_box">
                <view class="left_specification_box">
                    <view class="left_specification_title_box">
                        <view class="dian_box"></view>
                        <view class="specification_text_box">规格</view>
                    </view>
                    <view class="left_content_box">
                        <text style="color: rgba(128, 128, 128, 1);">车箱长：</text>
                        <text>约{{ carObj.length }}米</text>
                    </view>
                    <view class="left_content_box">
                        <text style="color: rgba(128, 128, 128, 1);">车箱宽：</text>
                        <text>约{{ carObj.width }}米</text>
                    </view>
                    <view class="left_content_box">
                        <text style="color: rgba(128, 128, 128, 1);">车箱高：</text>
                        <text>约{{ carObj.height }}米</text>
                    </view>
                </view>
                <view class="right_specification_box">
                    <view class="right_specification_title_box">
                        <view class="dian_box"></view>
                        <view class="klds_bvox">容积</view>
                    </view>
                    <view class="right_content_box">
                        <text>整车可拉{{ carObj.bag }}袋</text> <br> 整车可拉{{ carObj.square }}立方

                    </view>
                </view>
            </view>

            <view class="enter_box" @click="enterSubmit">确定更改车型</view>
        </view> -->

    </view>
</template>
<script>
import back from "@/components/goback/goback"
import empoy from "@/components/empoy/empoy"
export default {
    components: {
        back, empoy
    },
    data() {
        return {
            // category_id: '',//拉的方式id
            // categoryCon: '',//拉的方式
            // // positionCon: '',//沿街非沿街
            // productCon: '',//是否装车
            // carList: [
            // ],
            // carId: 2,
            // carObj: {},
            // producttext: ''
            id: '',
            car_htm:''
        }
    },
    onLoad(options) {
        this.id = options.id

    },
    onShow() {
        this.getvehicle()
        // setTimeout(() => {
        //     this.carObj = this.carList[0]
        // }, 1000)
    },
    methods: {
        // carBtn(item) {
        //     this.carId = item.id
        //     this.carObj = item
        // },
        getvehicle() {
            this.$Request.post(this.$api.index.vehicleDetail, { vehicle_id: this.id }).then(res => {
                if (res.code == 200) {
                    this.car_htm = res.data.content
                }
            })
        },
        // enterSubmit() {
        //     // uni.setStorageSync('carObj', this.carObj)
        //     this.$store.state.carObj = this.carObj
        //     uni.navigateBack()
        // }

    }
}
</script>
<style lang="scss" scoped>
.page {
    width: 100vw;
    min-height: 100vh;
    // background-color: rgba(230, 247, 242, 1);

    .content_box {
        width: 100%;
        height: 100%;
    }

    // .daohang_box {
    //     width: 100%;
    //     height: 40rpx;
    //     box-sizing: border-box;
    //     padding-left: 36rpx;
    //     line-height: 40rpx;
    //     font-size: 28rpx;
    //     font-weight: 400;
    //     line-height: 40rpx;
    //     color: rgba(0, 0, 0, 1);
    //     margin-bottom: 20rpx;
    // }

    // .content_box {
    //     width: 704rpx;
    //     height: 1142rpx;
    //     border-radius: 28rpx;
    //     background: rgba(255, 255, 255, 1);
    //     margin: auto;
    //     box-sizing: border-box;
    //     padding-top: 66rpx;

    //     .carName_box {
    //         width: 100%;
    //         padding: 0 40rpx;
    //         display: flex;
    //         justify-content: space-between;
    //         flex-wrap: wrap;
    //         margin-bottom: 100rpx;

    //         .dange_carnbame_box {
    //             flex-shrink: 0;
    //             width: 33%;
    //             height: 56rpx;
    //             line-height: 56rpx;
    //             box-sizing: border-box;
    //             padding: 0 20rpx;
    //             font-size: 26rpx;
    //             font-weight: 400;
    //             color: rgba(0, 0, 0, 1);
    //             margin-bottom: 22rpx;
    //             border-radius: 60rpx;
    //             text-align: center;

    //             &.dange_carnbame_sel_box {
    //                 background-color: rgba(26, 194, 121, 1);
    //                 color: rgba(255, 255, 255, 1);
    //             }
    //         }
    //     }

    //     .car_pic_box {
    //         width: 540rpx;
    //         // height: 258rpx;
    //         margin: auto;
    //         margin-bottom: 54rpx;

    //         image {
    //             width: 100%;
    //         }

    //     }

    //     .specification_box {
    //         width: 100%;
    //         height: 188rpx;
    //         // background-color: aqua;
    //         display: flex;
    //         justify-content: space-between;
    //         box-sizing: border-box;
    //         padding: 0 66rpx;
    //         margin-bottom: 80rpx;

    //         .left_specification_box {
    //             width: 50%;
    //             height: 100%;

    //             .left_specification_title_box {
    //                 width: 100%;
    //                 height: 40rpx;
    //                 display: flex;
    //                 justify-content: flex-start;
    //                 align-items: center;
    //                 margin-bottom: 12rpx;

    //                 .dian_box {
    //                     width: 8rpx;
    //                     height: 8rpx;
    //                     background: rgba(204, 204, 204, 1);
    //                     margin-right: 10rpx;
    //                 }

    //                 .specification_text_box {
    //                     height: 40rpx;
    //                     line-height: 40rpx;
    //                     font-size: 28rpx;
    //                     font-weight: 400;
    //                     line-height: 40rpx;
    //                     color: rgba(128, 128, 128, 1);
    //                 }
    //             }

    //             .left_content_box {
    //                 width: 100%;
    //                 // text-align: center;
    //                 height: 40rpx;
    //                 line-height: 40rpx;
    //                 font-size: 28rpx;
    //                 font-weight: 400;
    //                 color: rgba(0, 0, 0, 1);
    //                 margin-bottom: 10rpx;
    //                 box-sizing: border-box;
    //                 padding-left: 16rpx;
    //             }
    //         }

    //         .right_specification_box {
    //             width: 50%;
    //             height: 100%;

    //             .right_specification_title_box {
    //                 width: 100%;
    //                 height: 40rpx;
    //                 display: flex;
    //                 justify-content: flex-start;
    //                 align-items: center;
    //                 margin-bottom: 12rpx;

    //                 .dian_box {
    //                     width: 8rpx;
    //                     height: 8rpx;
    //                     background: rgba(204, 204, 204, 1);
    //                     margin-right: 10rpx;
    //                 }

    //                 .klds_bvox {
    //                     height: 40rpx;
    //                     line-height: 40rpx;
    //                     font-size: 28rpx;
    //                     font-weight: 400;
    //                     line-height: 40rpx;
    //                     color: rgba(128, 128, 128, 1);
    //                 }
    //             }

    //             .right_content_box {
    //                 width: 100%;
    //                 height: 40rpx;
    //                 line-height: 40rpx;
    //                 font-size: 28rpx;
    //                 font-weight: 400;
    //                 color: rgba(0, 0, 0, 1);
    //                 margin-bottom: 10rpx;
    //                 box-sizing: border-box;
    //                 padding-left: 16rpx;
    //             }
    //         }
    //     }

    //     .enter_box {
    //         width: 634rpx;
    //         height: 100rpx;
    //         border-radius: 20rpx;
    //         background: rgba(26, 194, 121, 1);
    //         margin: auto;
    //         font-size: 32rpx;
    //         font-weight: 500;
    //         line-height: 100rpx;
    //         color: rgba(255, 255, 255, 1);
    //         text-align: center;
    //     }

    // }
}
</style>